<template>
  <div>
    <div class="top-nav">
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <div class="title">{{songs ? "歌曲广场" : "歌单广场"}}</div>
    </div>
    <!-- 更多歌曲:{{$route.params.type}} -->
    <div class="play-list">
      <div class="item"
        v-for="item in list"
        :key='item.id'
        >
          <div class="wrapper">
              <div class="img"><img :src="item.picUrl" alt=""></div>
              <div class="name">{{item.name}}</div>
          </div>
      </div>
    </div>
    <div ref="loadmore">加载更多数据</div>
  </div>
</template>

<script>
export default {
  name:'GetMore',
  data() {
    return {
      playLists:null,
      songs:null,
      list:null,
      // height:window.screen.height,
      // offset:0
    }
  },
  methods: {
    http(offset){
        console.log(this.$route.params.type)     
        if(this.$route.params.type === 'songs') {
          this.$api.getSongs({
          limit:18,
          offset:offset
        }).then(res => {
          offset += 18
          this.songs = true
          this.list = res.result;
            // res.type = this.type[1]
            // console.log(res)
        });
        } else {
          this.$api.getMusicList({
            limit:18,
            // offset:offset
            }).then((res) => {
              // this.offset += 18
              this.playLists = true;
              this.list = res.result;
            }
          );
        } 
    },
  },
  mounted() {
    this.http(this.offset);
    window.addEventListener('scroll',() => {
      if(this.$refs.loadmore.getBoundingClientRect().top+21 == this.height) {
        this.http(this.offset)
      }
    });
    //滚动条下拉时页面的高度等于可见加不可见区域的高度
  }
}
</script>

<style lang="less" scoped>
.top-nav {
  display: grid;
  grid: 1fr /1fr 1fr 1fr;
  i {
    font-size: 1.2em;
    padding: 10px 10px;
  }
  .title {
    margin: 0 auto;
    font-size: 1.2em;
  }
}
.play-list {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    padding: 0px 15px;
    .wrapper {
    width: 118px;
    height: 160px;
    margin-top: 10px;
    overflow: hidden;
    .name {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
    .img {
        width: 130px;
        img {
            width: 100%;
            }
        }
    }
}
</style>